<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<view class="kui-my-3 kui-flex">
				<kui-text>暗黑模式：</kui-text>
				<kui-switch v-model="modeChecked" @change="changeMode"></kui-switch>
			</view>
			<kui-cell-group title="徽标类型">
				<kui-space :gap="[30,20]">
					<kui-badge></kui-badge>
					<kui-badge type="primary"></kui-badge>
					<kui-badge type="info"></kui-badge>
					<kui-badge type="danger"></kui-badge>
					<kui-badge type="warning"></kui-badge>
				</kui-space>
			</kui-cell-group>
			<view class="kui-mt-3">
				<kui-cell-group title="圆点徽标">
					<kui-badge type="danger" value="0" dot></kui-badge>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义内容徽标">
					<kui-space :gap="[30,20]">
						<kui-badge type="primary" value="徽标"></kui-badge>
						<kui-badge type="danger" value="热门"></kui-badge>
						<kui-badge type="info" value="kviewui"></kui-badge>
						<kui-badge type="danger" value="hot"></kui-badge>
						<kui-badge type="warning" value="66"></kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="渐变主题徽标">
					<kui-space :gap="[30,20]">
						<kui-badge type="primary" value="666" gradient></kui-badge>
						<kui-badge type="warning" value="badge" gradient></kui-badge>
						<kui-badge type="danger" value="hot" gradient></kui-badge>
						<kui-badge type="info" value="message" gradient></kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="最大值徽标">
					<kui-space :gap="[30,20]">
						<kui-badge type="danger" value="66"></kui-badge>
						<kui-badge type="danger" value="166" :max="99"></kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="定位徽标">
					<kui-space :gap="[30,40]">
						<kui-badge type="danger" position="right-top" value="0">
							<kui-tag shape="square">右上</kui-tag>
						</kui-badge>
						<kui-badge type="danger" position="right-bottom" value="0">
							<kui-tag shape="square">右下</kui-tag>
						</kui-badge>
						<kui-badge type="danger" position="left-top" value="0">
							<kui-tag shape="square">左上</kui-tag>
						</kui-badge>
						<kui-badge type="danger" position="left-bottom" value="0">
							<kui-tag shape="square">左下</kui-tag>
						</kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="显示状态">
					<kui-space :gap="[30,40]">
						<kui-badge type="danger" :show="show" position="right-top" value="0">
							<kui-tag shape="square">动态显示</kui-tag>
						</kui-badge>
						<kui-button type="primary" @click="onChange">点击切换徽标状态</kui-button>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义颜色徽标">
					<kui-space :gap="[30,40]">
						<kui-badge color="hsla(120,120%,20%,1)" position="right-top" value="0">
							<kui-tag shape="square">自定义颜色</kui-tag>
						</kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义图标徽标">
					<kui-space :gap="[30,40]">
						<kui-badge type="danger" icon="heart" position="right-top">
							<kui-tag shape="square">自定义图标</kui-tag>
						</kui-badge>
					</kui-space>
				</kui-cell-group>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs
	} from 'vue';
	
	export default {
		setup() {
			const state = reactive({
				show: true,
				mode: 'light',
				modeChecked: false
			});
			
			const onChange = () => {
				state.show = !state.show;
			}
			
			const changeMode = () => {
				state.mode = state.mode == "light" ? "dark" : "light";
				uni.$emit("changeMode", state.mode);
			};
			
			return {
				...toRefs(state),
				onChange,
				changeMode
			}
		}
	}
</script>

<style>

</style>
